<template>
	<div class="purchase-warehousing-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<el-form ref="info" :model="info" :rules="rules" label-width="100px" class="demo-ruleForm">
					<div class="content_info">
						<template v-if="propUpType !== 'detail'">
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.warehousingDate')">
										<el-input disabled :value="info.createTime" :placeholder="$t('placeholderTip.bringOut')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.supplier')">
										<el-input disabled readonly :value="info.supplierName" :placeholder="$t('placeholderTip.bringOut')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.purchaseOrderNumber')" prop="purchaseCode">
										<el-input :placeholder="$t('placeholderTip.pSelect')" :value="info.purchaseCode" @focus="getFrame">
											<el-button slot="append" icon="el-icon-search" @click="getFrame"></el-button>
										</el-input>
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.purchaseType')">
										<el-input disabled :value="info.purchaseTypeName" :placeholder="$t('placeholderTip.bringOut')" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.typeOfSupply')">
										<el-input disabled :value="info.classifyNum" :placeholder="$t('placeholderTip.bringOut')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.remark')">
										<el-input v-model="info.remark" type="textarea" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<div class="contentInfo">
								<div class="header">
									<div class="title">{{ $t('text.detailsOfIncomingProducts') }}</div>
									<div class="btn">
									</div>
								</div>
								<el-table :data="info.intoInventories" border style="width: 100%">
									<el-table-column prop="code" :label="$t('formLabel.partNumber')" align="center" />
									<el-table-column prop="name" :label="$t('formLabel.partName')" align="center" />
									<el-table-column prop="alias" :label="$t('formLabel.partAnotherName')" align="center" />
									<el-table-column prop="brand" :label="$t('publicFormLabel.brandName')" align="center" width="200px" />
									<el-table-column prop="specs" :label="$t('formLabel.specification')" align="center" />
									<el-table-column prop="unit" :label="$t('formLabel.unit')" align="center" />
									<el-table-column :label="$t('formLabel.retailPrice')" align="center" width="180px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'intoInventories.' + scope.$index + '.retailPrice'"
												:rules="rules.retailPrice">
												<el-input type="number" v-model="scope.row.retailPrice" :placeholder="$t('placeholderTip.enter')"
													style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.claiMprice')" align="center" width="180px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'intoInventories.' + scope.$index + '.claimPrice'"
												:rules="rules.claimPrice">
												<el-input type="number" v-model="scope.row.claimPrice" :placeholder="$t('placeholderTip.enter')"
													style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.insurancePrice')" align="center" width="180px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'intoInventories.' + scope.$index + '.insurePrice'"
												:rules="rules.insurePrice">
												<el-input type="number" v-model="scope.row.insurePrice" :placeholder="$t('placeholderTip.enter')"
													style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.wholesalePrice')" align="center" width="180px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px"
												:prop="'intoInventories.' + scope.$index + '.wholesalePrice'" :rules="rules.wholesalePrice">
												<el-input type="number" v-model="scope.row.wholesalePrice"
													:placeholder="$t('placeholderTip.enter')" style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column prop="cost" :label="$t('formLabel.purchasePrice')" align="center" width="180px" />
									<el-table-column :label="$t('formLabel.quantityArrival')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.arriveNum }}
										</template>
									</el-table-column>
									<el-table-column prop="intoNum" :label="$t('publicFormLabel.intoNum')" align="center" />
									<el-table-column :label="$t('formLabel.disqualificationNumber')" align="center" width="180px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px"
												:prop="'intoInventories.' + scope.$index + '.unqualifiedNum'" :rules="rules.unqualifiedNum">
												<el-input v-model="scope.row.unqualifiedNum" :placeholder="$t('placeholderTip.enter')"
													style="width:93%"></el-input>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.warehouseName')" align="center" width="200px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'intoInventories.' + scope.$index + '.warehouseId'"
												:rules="rules.warehouseId">
												<el-select style="width:93%" v-model="scope.row.warehouseId" filterable
													:placeholder="$t('placeholderTip.pSelect')" @change="getPositionList(scope.$index, $event)">
													<el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.storageLocation')" align="center" width="200px">
										<template slot-scope="scope">
											<el-form-item label=" " label-width="2px" :prop="'intoInventories.' + scope.$index + '.positionId'"
												:rules="rules.positionId">
												<el-select style="width:93%" v-model="scope.row.positionId" filterable
													:placeholder="$t('placeholderTip.pSelect')">
													<el-option v-for="item in scope.row.positionList" :key="item.id" :label="item.name"
														:value="item.id" />
												</el-select>
											</el-form-item>
										</template>
									</el-table-column>
								</el-table>
							</div>
						</template>
						<template v-else>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.warehouseEntryNumber')">
										<el-input readonly :value="info.intoOrder" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.warehousingDate')">
										<el-input readonly :value="info.createTime" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.supplier')">
										<el-input readonly :value="info.supplierName" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.purchaseOrderNumber')" prop="purchaseCode">
										<el-input readonly :value="info.purchaseCode" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.purchaseType')">
										<el-input readonly :value="info.purchaseType" />
									</el-form-item>
								</el-col>
								<el-col :span="8">
									<el-form-item :label="$t('formLabel.typeOfSupply')">
										<el-input readonly :value="info.classifyNum" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="8">
									<el-form-item :label="$t('publicFormLabel.remark')">
										<el-input readonly v-model="info.remark" type="textarea" />
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<div class="contentInfo">
								<div class="header">
									<div class="title">{{ $t('text.detailsOfIncomingProducts') }}</div>
								</div>
								<el-table :data="info.intoInventories" border style="width: 100%">
									<el-table-column prop="code" :label="$t('formLabel.partNumber')" align="center" />
									<el-table-column prop="name" :label="$t('formLabel.partName')" align="center" />
									<el-table-column prop="alias" :label="$t('formLabel.partAnotherName')" align="center" />
									<el-table-column prop="brand" :label="$t('publicFormLabel.brandName')" align="center" width="200px" />
									<el-table-column prop="specs" :label="$t('formLabel.specification')" align="center" />
									<el-table-column prop="unit" :label="$t('formLabel.unit')" align="center" />
									<el-table-column :label="$t('formLabel.retailPrice')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.retailPrice }}
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.claiMprice')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.claimPrice }}
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.insurancePrice')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.insurePrice }}
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.wholesalePrice')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.wholesalePrice }}
										</template>
									</el-table-column>
									<el-table-column prop="cost" :label="$t('formLabel.purchasePrice')" align="center" width="180px" />
									<el-table-column :label="$t('formLabel.quantityArrival')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.arriveNum }}
										</template>
									</el-table-column>
									<el-table-column prop="intoNum" :label="$t('publicFormLabel.intoNum')" align="center" />
									<el-table-column :label="$t('formLabel.disqualificationNumber')" align="center" width="180px">
										<template slot-scope="scope">
											{{ scope.row.unqualifiedNum }}
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.warehouseName')" align="center" width="200px">
										<template slot-scope="scope">
											{{ scope.row.warehouseName }}
										</template>
									</el-table-column>
									<el-table-column :label="$t('formLabel.storageLocation')" align="center" width="200px">
										<template slot-scope="scope">
											{{ scope.row.positionName }}
										</template>
									</el-table-column>
								</el-table>
							</div>
						</template>
					</div>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
		<!-- 选择采购 -->
		<purchaseModel ref="purchaseModel"></purchaseModel>
	</div>
</template>
<script>
import {
	getMaterialIntoInfo,
	setMaterialIntoSavePurchase,
	getWarehousePositionSelectList,
	getAssWarehouseSelectList,
	getPurchaseInventories
} from '@/api/parts-manager'
import defaultSettings from '@/settings'
import purchaseModel from '@/components/purchase-model'

export default {
	name: '',
	components: {
		purchaseModel
	},
	data() {
		return {
			BASE_IMG: defaultSettings.BASE_IMG,
			info: {
				remark: '',
			},
			warehouseList: [],//仓库
			rules: {
				purchaseCode: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				arriveNum: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				unqualifiedNum: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				warehouseId: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				positionId: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				retailPrice: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				insurePrice: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				claimPrice: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				wholesalePrice: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
			},
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
	},
	watch: {
		'info.intoInventories': {
			handler: function (val) {
				if (val && val.length > 0) {
					if (this.propUpType === 'add') {
						var sumNumber = 0
						var number = []
						var amountNumber = 0
						var intoAmt = []
						var supplyAmt = []
						var supplyAmtNumber = 0
						this.info.intoInventories.map(i => {
							if (i.intoNum) {
								number.push(Number(i.intoNum))
							}
							// 入库数量
							// if (i.arriveNum && i.unqualifiedNum) {
							// 	i.intoNum = Number(i.arriveNum) - Number(i.unqualifiedNum)
							// }
							if (i.arriveNum) {
								i.intoNum = Number(i.arriveNum)
							}
							// 入库总金额 = 总金额
							if (i.intoNum && i.cost) {
								i.amount = Number(i.intoNum) * Number(i.cost)
								intoAmt.push(Number(i.amount))
							}
							// 供货金额 单价*到货数量
							if (i.cost && i.arriveNum) {
								var price = Number(i.cost) * Number(i.arriveNum)
								supplyAmt.push(Number(price))
							}
						})
						number.forEach(item => {
							sumNumber = sumNumber + item
						})
						intoAmt.forEach(item => {
							amountNumber = amountNumber + item
						})
						supplyAmt.forEach(item => {
							supplyAmtNumber = supplyAmtNumber + item
						})
						this.info.totalNum = sumNumber //入库数量
						this.info.intoAmt = amountNumber //入库总金额
						this.info.totalAmt = this.info.intoAmt //总金额
						this.info.supplyAmt = supplyAmtNumber//供货金额
					}
				}
			},
			deep: true
		}
	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.propUpType === 'add') {
			this.getWarehouseList()
		} else if (this.$route.query.id) {
			this.getInfo(this.$route.query.id)
		}
	},
	created() {
		console.log('created')
	},
	activated() { },

	destroyed() { },
	methods: {
		// 仓库
		getWarehouseList() {
			getAssWarehouseSelectList().then(res => {
				if (res.code === 200) {
					this.warehouseList = res.data || []
				}
			})
		},
		// 根据仓库id 选择库位
		getPositionList(index, id) {
			this.info.intoInventories[index].positionList = []
			this.info.intoInventories[index].positionId = ''
			getWarehousePositionSelectList(id).then(res => {
				if (res.code === 200) {
					this.info.intoInventories[index].positionList = res.data || []
					this.$forceUpdate();
				}
			})
		},
		// 采购弹框
		getFrame() {
			this.$refs.purchaseModel.getOpen()
		},
		// 处理配件列表选中的数据
		getCheckoutData(tar) {
			var data = JSON.parse(tar)
			data.remark = this.info.remark
			data['purchaseId'] = data.id
			getPurchaseInventories(data.id).then(res => {
				if (res.code === 200) {
					res.data.map((i) => {
						i['intoId'] = i.id//入库id
						i['arriveNum'] = i.num //到货数量
						i['unqualifiedNum'] = ''//不合格数
						i['intoNum'] = ''//入库数量
						i['positionId'] = ''//库位id
						i['warehouseId'] = ''//仓库id
						i['positionList'] = []//库位
						delete i.num
						delete i.id
					})
					delete data.id
					data['intoInventories'] = res.data || []
					this.info = data
					this.$forceUpdate();
				}
			})
		},
		// 提交
		addSubmitForm() {
			this.$refs['info'].validate(valid => {
				if (valid) {
					var obj = JSON.parse(JSON.stringify(this.info))
					if (obj.intoInventories.length === 0) {
						this.$message({
							showClose: true,
							message: this.$t('text.intoInventoriestipInfo'),
							type: 'warning'
						})
						return false
					}
					var params = obj
					this.fullscreenLoading = true
					if (this.propUpType === 'add') {
						setMaterialIntoSavePurchase(params)
							.then(res => {
								if (res.code === 200) {
									this.$message({
										showClose: true,
										message: this.$t('text.addSucceedTip'),
										type: 'success'
									})
									this.fullscreenLoading = false
									this.getCancle()
								}
							})
							.catch(err => {
								this.fullscreenLoading = false
								console.log(err, 'err')
							})
					}
				} else {
					return false
				}
			})
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getMaterialIntoInfo(id).then(res => {
				if (res.code === 200) {
					this.info = res.data
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},
		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		},
	}
}
</script>
<style lang="scss" scoped>
.purchase-warehousing-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 40px);

				&>.content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}


			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}

			.contentInfo {
				margin-top: 22px;

				&>.header {
					margin-bottom: 22px;
					display: flex;
					justify-content: space-between;
					color: #606266;

					&>.title {
						font-size: 14px;
						font-weight: bold;
					}

				}
			}





		}
	}
}
</style>
<style lang="scss" scoped>
::v-deep .add_dialog {
	height: calc(100% - 30vh) !important;
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px) !important;

	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}

	.el-button:hover,
	.el-button:focus {
		color: #000;
	}
}
</style>
